<template>
	<view>
		<view v-if="this.userInfo.sign_status == 1 || this.sign_status==2">
			<view class="ptb12 plr15" style="background-color: #F8E6E7;" v-if="this.userInfo.sign_status==1">
				<image src="../../static/images/wallet/source.png" mode="" style="width: 27upx;height: 21upx;"></image>
				<text class="ft12 gray6 ml5" style="color: #F44A42;">{{$t('mine').首次提现需要电签完成实名认证}}</text>
			</view>
			<view class="ptb12 plr15" style="background-color: #F8E6E7;" v-if="this.sign_status==2">
				<image src="../../static/images/wallet/source.png" mode="" style="width: 27upx;height: 21upx;"></image>
				<text class="ft12 gray6 ml5" style="color: #F44A42;">{{$t('mine').注册个体户需要电签完成实名认证}}</text>
			</view>
		</view>
		<view class="ptb12 plr15" v-else>
			<image src="../../static/images/wallet/sourcegray.png" mode="" style="width: 27upx;height: 21upx;"></image>
			<text class="ft12 gray6 ml5">{{$t('mine').当前绑定}} {{true_namey}} {{bank_numy}}</text>
		</view>

		<view class="bgWhite plr15 ft15">
			<view class="align-center bdbe">
				<view class="txt">{{$t('mine').真实姓名}}</view>
				<input @blur="saveInfo()" v-model="username" type="text" class="flex1 h50"
					:placeholder="$t('mine').输入您的真实姓名" placeholder-class="placeholderStyle"
					:disabled="!(this.userInfo.sign_status == 1 || this.sign_status==2)"
					:class="!(this.userInfo.sign_status == 1 || this.sign_status==2)?'gray9':''" />
			</view>
			<view class="align-center">
				<view class="txt">{{$t('mine').身份证号}}</view>
				<input @blur="saveInfo()" v-model="id_num" type="text" class="flex1 h50"
					:placeholder="$t('mine').输入有效身份证号" placeholder-class="placeholderStyle"
					:disabled="!(this.userInfo.sign_status == 1 || this.sign_status==2)"
					:class="!(this.userInfo.sign_status == 1 || this.sign_status==2)?'gray9':''" />
			</view>
		</view>
		<view class="bgWhite plr15 ft15 mt10">
			<view class="align-center bdbe">
				<view class="txt">{{$t('mine').开户银行}}</view>
				<input @blur="saveInfo()" v-model="bank_name" type="text" class="flex1 h50"
					:placeholder="$t('mine').输入开户银行" placeholder-class="placeholderStyle" />
			</view>
			<view class="align-center bdbe">
				<view class="txt">{{$t('mine').银行卡号}}</view>
				<input @blur="saveInfo()" v-model="bank_num" type="number" class="flex1 h50"
					:placeholder="$t('mine').输入银行卡号" placeholder-class="placeholderStyle" />
			</view>
			<view class="align-center bdbe">
				<view class="txt">{{$t('index').手机号}}</view>
				<input @blur="saveInfo()" v-model="userInfo.phone" type="number" class="flex1 h50"
					:placeholder="$t('mine').输入手机号" placeholder-class="placeholderStyle" />
			</view>
			<view class="align-center">
				<view class="txt">{{$t('set').验证码}}</view>
				<input v-model="captcha" type="number" class="flex1 h50" :placeholder="$t('mine').输入验证码"
					placeholder-class="placeholderStyle" />
				<view class="radius4 bdlight tc ptb3 red ft12 plr8" @click="getCode()">
					{{ timeDown > 0 ? timeDown + 's' : $t('login').获取验证码 }}
				</view>
			</view>
		</view>
		<mix-button ref="confirmBtn" :text="$t('common').确认" marginTop="55rpx" @onConfirm="submit"></mix-button>

		<view class="mt20 gray6 plr15 ft12" v-if="this.userInfo.sign_status == 1 || this.sign_status==2">
			{{$t('mine').说明您在提交注册时}}
		</view>
		<view class="mt20 gray6 plr15 ft12" v-else>
			{{$t('mine').说明修改银行卡}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				true_namey: '',
				id_num: '',
				bank_name: '',
				bank_num: '',
				bank_numy: '',
				bank_phone: '',
				captcha: '',
				timeDown: "",
				isbind: '',
				sign_status: "",
				bankInfo: {}
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},

		onLoad(options) {
			this.sign_status = options.sign_status
			console.log(options.sign_status)
			// this.true_name = this.userInfo.true_name
			// this.id_num = this.userInfo.id_num
			// this.brank_name = this.userInfo.brank_name
			// this.brank_num = this.userInfo.brank_num
			// this.brank_phone = this.userInfo.phone
		},
		onShow() {
			// this.true_name = this.userInfo.true_name
			// this.id_num = this.userInfo.id_num
			// this.brank_name = this.userInfo.brank_name
			// this.brank_num = this.userInfo.brank_num
			// this.brank_phone = this.userInfo.phone
			// console.log(this.userInfo.sign_status,this.sign_status)
			if (this.userInfo.sign_status == 1 || this.sign_status == 1) {
				uni.setNavigationBarTitle({
					title: this.$t('mine').电签
				})
				if (uni.getStorageSync('bingCardInfo')) {
					let bingCardInfo = uni.getStorageSync('bingCardInfo')
					this.username = bingCardInfo.username
					this.id_num = bingCardInfo.id_num
					this.bank_name = bingCardInfo.bank_name
					this.bank_num = bingCardInfo.bank_num
					this.userInfo.phone = bingCardInfo.bank_phone
				}
			} else {
				uni.setNavigationBarTitle({
					title: this.$t('mine').换绑银行卡
				})
				this.getbankAPI()
			}

		},
		methods: {
			// 保存填写的信息
			saveInfo() {
				let bingCardInfo = {
					username: this.username,
					id_num: this.id_num,
					bank_name: this.bank_name,
					bank_num: this.bank_num,
					bank_phone: this.userInfo.phone,
				}
				uni.setStorageSync('bingCardInfo', bingCardInfo)
			},
			//获取验证码
			getCode() {
				if (this.timeDown > 0) {
					return;
				}
				this.$utils.throttle(() => {
					const phone = this.userInfo.phone;
					if (!this.userInfo.phone) {
						return this.$utils.msg(this.$t('login').请输入手机号码);
					}
					this.$api.smsSend({
						phone: phone,
						event: 'bindbrank',

					}).then((res) => {
						if (res && res.code == 1) {
							this.$utils.msg(res.msg);
							this.countDown(60);
						}
					})
				}, 2000)
			},
			//倒计时
			countDown(timer) {
				timer--;
				this.timeDown = timer;
				if (timer > 0) {
					setTimeout(() => {
						this.countDown(timer);
					}, 1000)
				}
			},
			// 换绑银行卡信息
			async submit() {
				if (!this.username) {
					return this.$utils.msg(this.$t('mine').请输入真实姓名)
				}
				console.log(!this.id_num)
				if (!this.id_num) {
					return this.$utils.msg(this.$t('mine').输入有效身份证号)
				}
				if (!this.bank_name) {
					return this.$utils.msg(this.$t('mine').输入开户银行)
				}
				if (!this.bank_num) {
					return this.$utils.msg(this.$t('mine').输入银行卡号)
				}
				if (!this.userInfo.phone) {
					return this.$utils.msg(this.$t('login').请输入手机号码)
				}
				if (!this.captcha) {
					return this.$utils.msg(this.$t('login').请输入验证码)
				}
				let infoObj = {
					username: this.username,
					id_num: this.id_num,
					bank_name: this.bank_name,
					bank_num: this.bank_num,
					bank_phone: this.userInfo.phone,
					captcha: this.captcha
				}
				console.log(infoObj)
				const res = await this.$api.bindbrank(infoObj)
				// return
				if (res && res.code == 1) {
					// this.userInfo.sign_status == 2
					if (res.data.sign_status == 2) {
						// this.navTo('/pages/wallet/index')
						this.navTo('/pages/wallet/withdraw')
					} else {
						this.getContractUrlAPI(1)
					}
				}
			},
			async getContractUrlAPI(cert_type) {
				// let obj = {
				// 	name: this.username,
				// 	idcard: this.id_num,
				// 	bankcard: this.bank_name,
				// 	phone: this.bank_phone,
				// 	cert_type:1
				// }
				const res = await this.$api.getContractUrl({
					cert_type: cert_type
				})
				if (res && res.code == 1) {
					location.href = res.data.url
				}
			},
			// 获取回显的银行卡信息
			async getbankAPI() {
				const res = await this.$api.getbank()
				if (res && res.code == 1) {
					this.bankInfo = res.data
					this.username = this.bankInfo.username
					this.id_num = this.bankInfo.id_num
					this.bank_name = this.bankInfo.bank_name
					this.bank_num = this.bankInfo.bank_num
					this.userInfo.phone = this.bankInfo.bank_phone
					let qfour = this.bank_num?.substring(0, 4)
					let hfour = this.bank_num?.substring(this.bank_num.length - 4)
					this.bank_numy = qfour + '****' + hfour
					let qname = this.username?.substring(0, 1)
					this.true_namey = qname + this.username?.substring(1).replace(/./g, '*');
				}
			}
		}
	}
</script>

<style lang="scss">
	.placeholderStyle {
		font-size: 30upx !important;
	}

	.tip {
		background-color: rgba(242, 60, 75, 0.1);
	}

	.txt {
		width: 170upx
	}
</style>